Common Widgets and Animation

Common Widgets and Animation

• start the course
• create a dialog popup box
• add custom buttons to a dialog popup box
• create and use a modal dialog box
• use and configure a datepicker widget
• create a tabs widget with multiple tabs
• add tabs dynamically to a tabs widget
• open a specific tab on page refresh or load
• work with the autocomplete widget
• use AJAX to provide data for a dynamic autocomplete widget
• use fadeIn(), fadeOut(), fadeTo(), and fadeToggle() to fade elements
• add a sliding motion to an element using slideDown(), slideUp(), and slideToggle()
• use animate() to animate an element and set the speed of the animation
• stop an animation before it has completed
• determine when an animation has completed before taking additional action on the element
• use color animations to animate color properties of an element
• use the Drop, Explode, Puff, Pulsate, and Fold effects on elements
• use the Blind, Bounce, Clip, Scale, and Shake effects on elements
• transfer the outline of one element to another element to create a visual interaction between the elements
• work with queues to build a set of functions to run on an element
• create a web page containing a widget and use animation to make the web page more interactive

Common Widgets and Animation

Common Widgets and Animation

• start the course
• create a dialog popup box
• add custom buttons to a dialog popup box
• create and use a modal dialog box
• use and configure a datepicker widget
• create a tabs widget with multiple tabs
• add tabs dynamically to a tabs widget
• open a specific tab on page refresh or load
• work with the autocomplete widget
• use AJAX to provide data for a dynamic autocomplete widget
• use fadeIn(), fadeOut(), fadeTo(), and fadeToggle() to fade elements
• add a sliding motion to an element using slideDown(), slideUp(), and slideToggle()
• use animate() to animate an element and set the speed of the animation
• stop an animation before it has completed
• determine when an animation has completed before taking additional action on the element
• use color animations to animate color properties of an element
• use the Drop, Explode, Puff, Pulsate, and Fold effects on elements
• use the Blind, Bounce, Clip, Scale, and Shake effects on elements
• transfer the outline of one element to another element to create a visual interaction between the elements
• work with queues to build a set of functions to run on an element
• create a web page containing a widget and use animation to make the web page more interactive

Common Widgets and Animation

Common Widgets and Animation

• start the course
• create a dialog popup box
• add custom buttons to a dialog popup box
• create and use a modal dialog box
• use and configure a datepicker widget
• create a tabs widget with multiple tabs
• add tabs dynamically to a tabs widget
• open a specific tab on page refresh or load
• work with the autocomplete widget
• use AJAX to provide data for a dynamic autocomplete widget
• use fadeIn(), fadeOut(), fadeTo(), and fadeToggle() to fade elements
• add a sliding motion to an element using slideDown(), slideUp(), and slideToggle()
• use animate() to animate an element and set the speed of the animation
• stop an animation before it has completed
• determine when an animation has completed before taking additional action on the element
• use color animations to animate color properties of an element
• use the Drop, Explode, Puff, Pulsate, and Fold effects on elements
• use the Blind, Bounce, Clip, Scale, and Shake effects on elements
• transfer the outline of one element to another element to create a visual interaction between the elements
• work with queues to build a set of functions to run on an element
• create a web page containing a widget and use animation to make the web page more interactive

Events, Manipulating Elements, and AJAX

Events, Manipulating Elements, and AJAX

• start the course
• distinguish and describe how to manipulate event types
• create click(), dblclick(), mouseenter(), mouseleave(), and hover() events for an element
• use and manipulate keyboard presses using the keypress(), keydown(), and keyup() events
• bind events dynamically to an element and trigger them
• work with the change(), submit(), focus(), and blur() event handlers
• create ready() document events
• use the resize(), and scroll() browser events
• describe the difference between prop() and attr() as well as identify and properly use prop() and attr() to get and set properties and attributes
• describe and use dimension methods like width() and height() to manipulate the inner, outer, and actual height and width of an element
• add, remove, and change elements and classes
• clone an element or set of elements
• use wrap() and unwrap() to add or remove parents to an element
• show and hide elements and start a web page with a hidden element
• describe AJAX and how AJAX has evolved
• describe the usage of the AJAX event handlers
• create an AJAX request
• create an error handler to display any AJAX communication errors
• create an AJAX request and display content from the requested data
• use AJAX to make a request and update an element on the web page based on the response

Events, Manipulating Elements, and AJAX

Events, Manipulating Elements, and AJAX

• start the course
• distinguish and describe how to manipulate event types
• create click(), dblclick(), mouseenter(), mouseleave(), and hover() events for an element
• use and manipulate keyboard presses using the keypress(), keydown(), and keyup() events
• bind events dynamically to an element and trigger them
• work with the change(), submit(), focus(), and blur() event handlers
• create ready() document events
• use the resize(), and scroll() browser events
• describe the difference between prop() and attr() as well as identify and properly use prop() and attr() to get and set properties and attributes
• describe and use dimension methods like width() and height() to manipulate the inner, outer, and actual height and width of an element
• add, remove, and change elements and classes
• clone an element or set of elements
• use wrap() and unwrap() to add or remove parents to an element
• show and hide elements and start a web page with a hidden element
• describe AJAX and how AJAX has evolved
• describe the usage of the AJAX event handlers
• create an AJAX request
• create an error handler to display any AJAX communication errors
• create an AJAX request and display content from the requested data
• use AJAX to make a request and update an element on the web page based on the response

Events, Manipulating Elements, and AJAX

Events, Manipulating Elements, and AJAX

• start the course
• distinguish and describe how to manipulate event types
• create click(), dblclick(), mouseenter(), mouseleave(), and hover() events for an element
• use and manipulate keyboard presses using the keypress(), keydown(), and keyup() events
• bind events dynamically to an element and trigger them
• work with the change(), submit(), focus(), and blur() event handlers
• create ready() document events
• use the resize(), and scroll() browser events
• describe the difference between prop() and attr() as well as identify and properly use prop() and attr() to get and set properties and attributes
• describe and use dimension methods like width() and height() to manipulate the inner, outer, and actual height and width of an element
• add, remove, and change elements and classes
• clone an element or set of elements
• use wrap() and unwrap() to add or remove parents to an element
• show and hide elements and start a web page with a hidden element
• describe AJAX and how AJAX has evolved
• describe the usage of the AJAX event handlers
• create an AJAX request
• create an error handler to display any AJAX communication errors
• create an AJAX request and display content from the requested data
• use AJAX to make a request and update an element on the web page based on the response

Introduction to jQuery

Introduction to jQuery

• start the course
• describe the differences between jQuery and jQuery UI and how they are used to create dynamic web sites
• create a web page that includes jQuery and use the console to confirm the library has loaded
• recognize how jQuery is referenced, how chaining works, and how to prevent conflicts with $
• use the Document Ready event and its shortcut
• recognize selectors and how they can be used
• bind an event to an element and trigger it
• use text(), html(), and val() to retrieve the contents of an element
• set the contents of an element using text(), html(), and val()
• use css() to get and set one or more CSS properties for an element
• insert an element using append(), prepend(), after(), and before()
• remove an element and describe the differences between remove() and empty()
• select and modify elements by their assigned classes
• describe how jQuery can traverse through the DOM to find or select elements
• use parent() and children() methods to move up and down the DOM tree
• walk the children of an element using siblings(), next(), and prev() methods
• filter the returned group of elements using first(), last(), not(), and eq()
• create a web page and manipulate elements using jQuery

Introduction to jQuery

Introduction to jQuery

• start the course
• describe the differences between jQuery and jQuery UI and how they are used to create dynamic web sites
• create a web page that includes jQuery and use the console to confirm the library has loaded
• recognize how jQuery is referenced, how chaining works, and how to prevent conflicts with $
• use the Document Ready event and its shortcut
• recognize selectors and how they can be used
• bind an event to an element and trigger it
• use text(), html(), and val() to retrieve the contents of an element
• set the contents of an element using text(), html(), and val()
• use css() to get and set one or more CSS properties for an element
• insert an element using append(), prepend(), after(), and before()
• remove an element and describe the differences between remove() and empty()
• select and modify elements by their assigned classes
• describe how jQuery can traverse through the DOM to find or select elements
• use parent() and children() methods to move up and down the DOM tree
• walk the children of an element using siblings(), next(), and prev() methods
• filter the returned group of elements using first(), last(), not(), and eq()
• create a web page and manipulate elements using jQuery

Introduction to jQuery

Introduction to jQuery

• start the course
• describe the differences between jQuery and jQuery UI and how they are used to create dynamic web sites
• create a web page that includes jQuery and use the console to confirm the library has loaded
• recognize how jQuery is referenced, how chaining works, and how to prevent conflicts with $
• use the Document Ready event and its shortcut
• recognize selectors and how they can be used
• bind an event to an element and trigger it
• use text(), html(), and val() to retrieve the contents of an element
• set the contents of an element using text(), html(), and val()
• use css() to get and set one or more CSS properties for an element
• insert an element using append(), prepend(), after(), and before()
• remove an element and describe the differences between remove() and empty()
• select and modify elements by their assigned classes
• describe how jQuery can traverse through the DOM to find or select elements
• use parent() and children() methods to move up and down the DOM tree
• walk the children of an element using siblings(), next(), and prev() methods
• filter the returned group of elements using first(), last(), not(), and eq()
• create a web page and manipulate elements using jQuery